Laravel VueJs e Websocket. Bom dia pessoa, tudo bem?

您所在的位置：网站首页 › websocket laravel › Laravel VueJs e Websocket. Bom dia pessoa, tudo bem?

Laravel VueJs e Websocket. Bom dia pessoa, tudo bem?

2024-06-04 23:33| 来源: 网络整理| 查看: 265

Laravel VueJs e Websocket

Mateus Galasso

5 min read·Jun 6, 2019

Bom dia pessoa, tudo bem?

Se você veio até esse texto provavelmente esta tentando criar um chat no seu sistema ou mesmo procurando uma forma para que ele fique realtime ou push notification.

Depois de bater a cabeça em alguns tutoriais eu consegui entender e criar de forma prática e rápida um servidor de websocket no Laravel. Isso mesmo, você vai precisar criar um outro pequeno servidor de websocket.

Pacotes PHP envolvidos:

Eu utilizei o Laravel-Websockets para o Back-End e Pusher. Só adicionando uma observação aqui, Pusher é um plataforma para criar aplicações realtime. Mas não utilizaremos ele, utilizaremos nosso servidor local do qual eu falei anteriormente.

Instalando Laravel-Websockets

Abra o terminal na raiz do seu projeto e

composer require beyondcode/laravel-websocketsphp artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"php artisan migratephp artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

Primeiro comando é para instalar o pacote. O segundo é para criar o arquivo de migrações de tabelas. O terceiro é para migrar as tabelas e o ultimo é para criar o arquivo de configuração do servidor do websocket.

Agora, a melhor forma de trabalhar com o Laravel-Websockets é combinar com pusher para isso execute o comando no terminal

composer require pusher/pusher-php-server "~3.0"

E altere no .env a linha de Broadcast

BROADCAST_DRIVER=pusher

Agora altere as configurações do pusher no .env

PUSHER_APP_ID=SistemaPUSHER_APP_KEY=SistemakeyPUSHER_APP_SECRET=SistemaSecretPUSHER_APP_CLUSTER=mt1

Em config/broadcasting.php tem um local de configuração do pusher, altere para ficar dessa maneira

'pusher' => [ 'driver' => 'pusher', 'key' => env('PUSHER_APP_KEY'), 'secret' => env('PUSHER_APP_SECRET'), 'app_id' => env('PUSHER_APP_ID'), 'options' => [ 'cluster' => env('PUSHER_APP_CLUSTER'), 'encrypted' => true, 'host' => '127.0.0.1', 'port' => 6001, 'scheme' => 'http' ],],

Agora vá no config/app.php e descomente a linha

App\Providers\BroadcastServiceProvider::class,

Todos os pacotes instalados e configurados, podemos agora rodar o servidor

php artisan websockets:serve

Não esqueça de rodar o comando php artisan queue:listen se não não vai ter nada ouvindo os eventos que serão disparados

php artisan queue:listen

Eu alterei no meu caso também no .env a linha

QUEUE_CONNECTION=sync

Assim o disparo do evento no broadcast é imediato.

Criando evento de broadcast

Os eventos do Laravel fornecem uma implementação simples do observador, permitindo que você se inscreva e ouça vários eventos que ocorrem em seu aplicativo. (Direto da documentação)

Comando para criar um evento normal no Laravel

php artisan make:event EventoTest

Acrescente na classe um implements conforme abaixo

class EventTest implements ShouldBroadcast

Verifique se a função broadcastOn foi criado no final da classe. Essa função diz para que canal o broadcast deve ser disparado.

Minha classe inteira de teste ficou da seguinte maneira

class EventTest implements ShouldBroadcast{ use Dispatchable, InteractsWithSockets, SerializesModels; public $mensagem;

/** * Create a new event instance. * * @param $mensagem */ public function __construct($mensagem) { $this->mensagem = $mensagem; }

/** * Get the channels the event should broadcast on. * * @return Channel|array */ public function broadcastOn() { return new Channel('eventTest'); }}

Essa propriedade $mensagem eu vou utilizar para quando chamar o evento passando a mensagem como parâmetro. Vocês vão ver lá no final.

Instalando no Vuejs

Agora precisamos instalar dois pacotes javascript no sistema.

npm install --save laravel-echo pusher-js

No seu main.js ou o arquivo principal do seus sistema coloque a seguintes linhas

import Echo from 'laravel-echo' window.Pusher = require('pusher-js')

window.Echo = new Echo({ broadcaster: 'pusher', key: '

Sistemakey', wsHost: window.location.hostname, wsPort: 6001, disableStats: true })

Nesse caso como estamos rodando em teste e servidor local o wsHost fica como aparece, mas o ideal seria você criar uma variável para que quando o código for para produção esse parâmetro seja automaticamente alterado.

Até agora foi somente instalação e configuração dos servidores para utilizar o Broadcasting do Laravel

Agora para utilizar aquele canal que criamos no evento lá no Laravel fazemos

window.Echo.channel('eventTest') .listen('EventTest', (e) => { console.log(e.mensagem) })

No meu caso eu coloquei no arquivo que compõe o header da tela, mas você pode colocar onde bem entender.

Pronto tudo instalado e configurado. Agora vamos testar para ver se funciona

Testando

No meu caso eu criei uma rota simples para chamar o evento e disparar uma mensagem.

Route::get('enviaevento', function () { return event(new \App\Events\EventTest('palmeiras não tem mundial'));});

Agora abra duas abas no browser e no primeiro vai a onde você colocou o seu Listener do javascript e uma outra onde você vai chamar a rota do php e testa ai.

deve aparecer a no console do browser a mensagem que você enviou ao chamar a rota do Laravel.

E na produção?

Beleza nosso código ta lindo, ta funcionando…. mas na máquina local.

Precisamos colocar isso funcionando no servidor de produção.

No meu caso eu uso o nssm para criar um serviço no windows de forma mais fácil.

Faça o download e unzip o programa no c:/ (para mim fica mais fácil na raiz mas você pode colocar onde quiser).

dentro da pasta wind64 abra o ‘cmd’ e digite

nssm install LaravelQueueListen

Vai abrir uma tela como esta daqui

Agora é só preencher os campos para que fique desta forma:

Na aba Details:

na aba Log on:

Clique em Install service e pronto, seu serviço rodando o Queue Listen do Laravel esta instalado. Verifique se ele já esta rodando. Se não estiver é só iniciar

Faça a mesma coisa com o comando do websockets:serve que vimos anteriormente.

É isso ai agora você tem um servidor websocket de aplicação em tempo real rodando no seu sevidor

O tutorial ficou um pouco grande mas essa parte do Laravel é mais complicada mesmo. Espero que você tenha entendido.

Qualquer duvida deixe no comentário que eu irei responder com certeza

Stay tuned e eu acho que te vejo na próxima.

【本文地址】

公司简介

联系我们